<template>
  <div class="buygoods-container">
    <div v-if="views.length > 2 && views[2]" class="header-row">
      <h2 class="section-title">{{ views[2].name }}</h2>
      <div v-if="palteTabList.length > 0" class="tag-list">
        <a 
          v-for="(tab, index) in palteTabList" 
          :key="tab.id" 
          :href="tab.jumpUrl"
          class="tag-item"
        >
          {{ tab.name }}
          <span v-if="index < palteTabList.length - 1" class="separator">/</span>
        </a>
      </div>
    </div>


    <div v-if="platePicList.length > 0" class="image-grid">
      <div class="first-row">
        <div class="first-col">
          <a :href="platePicList[0].jumpUrl" class="image-link">
            <img :src="platePicList[0].imgUrl" :alt="'图片1'" class="grid-image">
          </a>
        </div>
        <div class="second-col">
          <a :href="platePicList[1].jumpUrl" class="image-link">
            <img :src="platePicList[1].imgUrl" :alt="'图片2'" class="grid-image">
          </a>
        </div>
        <div class="third-col">
          <a :href="platePicList[2].jumpUrl" class="image-link top-image">
            <img :src="platePicList[2].imgUrl" :alt="'图片3'" class="grid-image">
          </a>
          <a :href="platePicList[3].jumpUrl" class="image-link bottom-image">
            <img :src="platePicList[3].imgUrl" :alt="'图片4'" class="grid-image">
          </a>
        </div>
      </div>


      <div class="second-row">
        <a 
          v-for="(pic, index) in platePicList.slice(4, 7)" 
          :key="pic.id" 
          :href="pic.jumpUrl" 
          class="second-row-image"
        >
          <img :src="pic.imgUrl" :alt="'图片' + (5 + index)" class="grid-image">
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { getPCPlateContent } from "@/api";
export default {
  name: "Buygoods",
  data() {
    return {
      platePicList: [],
      views: [],
      palteTabList: [] 
    };
  },methods: {
  goToGoodsDetail(goodsId) {
    this.$router.push({
      name: 'GoodsDetail',
      params: { 
        id: goodsId 
      }
    }).catch(err => {
      if (!err.message.includes('Avoided redundant navigation')) {
        console.error('路由跳转错误:', err);
      }
    });
  }
},
  async created() {
    try {
      const response = await getPCPlateContent();
      if (response?.result?.views?.length > 2) {
        this.views = response.result.views;
        this.platePicList = this.views[2].platePicList || [];
        this.palteTabList = this.views[2].palteTabList || []; 
      }
    } catch (error) {
      console.error("加载商品数据失败:", error);
    }
  },
};
</script>

<style scoped>
.buygoods-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
}

.tag-list {
  display: flex;
  align-items: center;
}

.tag-item {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  padding: 0 5px;
  transition: color 0.3s;
}

.tag-item:hover {
  color: #1890ff;
}

.separator {
  color: #ddd;
  margin-left: 5px;
}

.image-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.first-row {
  display: flex;
  gap: 15px;
  height: 460px; 
}

.first-col, .second-col, .third-col {
  flex: 1;
  display: flex;
}

.first-col, .second-col {
  flex-basis: 33.33%;
}

.third-col {
  flex-basis: 33.33%;
  flex-direction: column;
  gap: 15px;
}

.grid-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s;
}

.image-link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.image-link:hover .grid-image {
  transform: scale(1.03);
}

.top-image, .bottom-image {
  flex: 1;
  height: 50%;
}

.second-row {
  display: flex;
  gap: 15px;
  height: 160px;
}

.second-row-image {
  flex: 1;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
</style>